<template>
	<div>
		<van-search
			v-model="value"
			shape="round"
			background="#4fc08d"
			placeholder="请输入搜索关键词"
			@input="onSearch"
		/>
		<div class="list">
			<dl 
				v-for="v in list" 
				:key="v.id"
				@click="toDetail(v.id)"
				>
					<dt>
						<van-image :src="v.url" alt="" lazy-load width="100%"/>
					</dt>
					<dd>
						<h3>{{ v.title }}</h3>
						<p>{{ v.desc }}</p>
						<b>单价： ￥{{ v.price }}</b>
					</dd>
			</dl>
		</div>
	</div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
	name: 'home',
	data() {
		return {
			value: ''
		}
	},
	computed: {
		...mapState({
			// 获取仓库数据
			list: state => state.list
		}),
		...mapGetters(['searchList'])
	},
	methods: {
		// 获取仓库 actions 方法
		...mapActions(['fetchList']),
		toDetail(id) {
			this.$router.push({ name: 'detail', params: { id }})
		},
		onSearch() {
			this.fetchList(this.value)
		}
	},
	mounted() {
		this.fetchList(this.value)
	}
}
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.list {
	display: flex;
	flex-wrap: wrap;
	dl {
		width: 50%;
		padding: 10px;
		dt {
			img {
				width: 100%;
			}
		}

		dd {
			h3 {}

			p {}

			b {
				color: red;
			}
		}
	}
}
</style>